<template>
      <div>
            <div class="search">
                  <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音">
            </div>
            <div class="search-content" ref="search" v-show="keyword">
                  <ul>
                        <li
                            class="search-item border-bottom"
                            v-for="item of list"
                            :key="item.id"
                            @click="handleCityClick(item.name)"
                        >
                              {{item.name}}
                        </li>
                        <li class="search-item border-bottom" v-show="hasNoData">没有找到匹配数据</li>
                  </ul>
            </div>
      </div>
</template>

<script>
    import Bscroll from 'better-scroll'
    import {mapMutations} from 'vuex'
  export default {
    name: "CitySearch",
     data () {
       return {
          keyword:'',
          list:[],
          timer:null
       }
     },
     methods: {
           handleCityClick (city) {
                 //this.$store.commit('changeCity',city);/*调用action方法时一定要调用dispatch方法*/
                 this.changeCity(city);
                 this.$router.push('/')/*js编程式的路由跳转*/
           },
           ...mapMutations(['changeCity'])/*映射mutation*/
     },
     computed:{
       hasNoData () {
          return !this.list.length
       }
     },
     props:{
       cities:Object
     },
     watch: {
       keyword () {
          if (this.timer) {
             clearTimeout(this.timer)
          }
          if (!this.keyword){
             this.list=[];
             return
          }
          this.timer=setTimeout(() => {
             const  result=[];
             for (let i in this.cities) {
                this.cities[i].forEach((value) => {
                   if (value.spell.indexOf(this.keyword) > -1 ||
                       value.name.indexOf(this.keyword) > -1){/*indexOf检索输入的值在city.json是否存在，如没有则返回-1*/
                      result.push(value)
                   }
                })
             }
             this.list=result
          },100)
       }
     },
     mounted () {
       this.scroll=new Bscroll(this.$refs.search)/*实现页面滚动,需要获取dom元素*/

    }
  }
</script>

<style lang="stylus" scoped>
      @import "../../assets/styles/varibles.styl"
        .search
          height .72rem
          padding 0 .1rem
          background $bgColor
         .search-input
           box-sizing border-box
           width 100%
           height .62rem
           padding 0 .1rem
           line-height .62rem
           text-align center
           border-radius  .06rem
           color #666
        .search-content
          z-index 1
          overflow hidden
          position absolute
          top 1.58rem
          left 0
          right 0
          bottom 0
          background #eee
         .search-item
          line-height .62rem
          padding-left .2rem
          background #fff
          color #666
</style>